*{
    padding: 0;
    margin: 0;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: hotpink;
    perspective: 900px;
}
section{
    position: relative;
    width: 300px;
    height: 200px;
    cursor: pointer;
    transform-style: preserve-3d;
}
section:hover{
    animation-play-state: paused;
}
section div{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    -webkit-box-reflect: below 15px
    -webkit-box-gradient(transparent 10%,rgba(255,255,255,0.3));
}
section div:nth-child(1){
    transform: translateZ(300px);
    background-color: #fffa65;
}
section div:nth-child(2){
    transform: translateY(60deg) translateZ(300px);
    background-color: #fffa65;
}
section div:nth-child(3){
    transform: translateY(120deg) translateZ(300px);
    background-color: #fffa65;
}
section div:nth-child(4){
    transform: translateY(180deg) translateZ(300px);
    background-color: #fffa65;
}
section div:nth-child(5){
    transform: translateY(2400deg) translateZ(300px);
    background-color: #fffa65;
}
section div:nth-child(6){
    transform: translateY(300deg) translateZ(300px);
    background-color: #fffa65;
}
section div:nth-child(7){
    transform: translateY(210deg) translateZ(300px);
    background-color: #fffa65;
}
section div:nth-child(8){
    transform: translateY(240deg) translateZ(300px);
    background-color: #fffa65;
}
section div:nth-child(9){
    transform: translateY(270deg) translateZ(300px);
    background-color: #fffa65;
}

section div:nth-child(10){
    transform: translateY(300deg) translateZ(300px);
    background-color: #fffa65;
}
@keyframes rotato{
  0%{
    transform: rotateY(0);
  }
  100%{
      transform: rotateY(360deg);
  }
}

